import React from "react";
import {Column, Table, Cell} from "@blueprintjs/table";
import {usePoetry} from "./ poetry-hooks";
import {Icon, Intent, ButtonGroup, Button} from "@blueprintjs/core";
import {IconNames} from "@blueprintjs/icons";
import styled from "styled-components";
import {SelectionModes} from "@blueprintjs/table";
import {toggleFavorite} from "./helpers/storage";
import {AppLeftTopToaster} from "./helpers/Toaster";

const StyledCellLine = styled.div`
display: flex;
align-items: center;
`;

const StyledTitle = styled.div`
flex-grow: 1;
cursor: pointer;
`;

const cellRenderer = (favorites, poetryItems, onTitleClick, onStarClick) => (rowIndex) => {
    const poetryTitle = poetryItems[rowIndex].title;
    const inFavorites = favorites.includes(poetryTitle);
    const handleClick = () => onTitleClick(rowIndex);

    const handleStarClick = () => onStarClick(poetryTitle, inFavorites, rowIndex);

    return (
        <Cell>
            <StyledCellLine>
                <Icon style={{cursor: 'pointer'}}
                      onClick={handleStarClick}
                      icon={inFavorites ? IconNames.STAR : IconNames.STAR_EMPTY}
                      iconSize={Icon.SIZE_LARGE}
                      intent={Intent.PRIMARY}/>
                <StyledTitle onClick={handleClick}>{poetryTitle}</StyledTitle>
            </StyledCellLine>
        </Cell>
    )
};


function ColumnHeader(props) {
    const IconStarEmpty = <Icon icon={IconNames.STAR_EMPTY} iconSize={Icon.SIZE_LARGE}/>;
    const onFavoriteClick = () => {
        if (props.favoritesIsEmpty) {
            AppLeftTopToaster.show({
                message: <>
                    <p>收藏列表还空的呢.</p>
                    <p>您可以点击标题前的{IconStarEmpty}收藏.</p>
                </>,
                intent: Intent.PRIMARY,
            });
            return;
        }
        props.toggleOnlyFavorite();
    };

    return <ButtonGroup>
        <Button active={!props.onlyFavorite} onClick={props.toggleOnlyFavorite}>全部</Button>
        <Button active={props.onlyFavorite} onClick={onFavoriteClick} icon={IconNames.STAR_EMPTY}>仅收藏</Button>
    </ButtonGroup>
}

export function PoetryTable() {
    const {
        poetryItems, selectedIndex, setSelectedIndex,
        showTable, toggleTable,
        favorites, toggleFavoriteUpdater,
        onlyFavorite, toggleOnlyFavorite
    } = usePoetry();
    const onTitleClick = (rowIndex) => {
        setSelectedIndex(rowIndex);
    };

    const onStarClick = (title, isRemove, rowIndex) => {
        toggleFavoriteUpdater();
        if (onlyFavorite && isRemove) {
            // 移除当前前面的收藏
            if (rowIndex < selectedIndex) {
                setSelectedIndex(selectedIndex - 1);
                // 从收藏中移除当前
            } else if (rowIndex === selectedIndex) {
                const stillHasSelectedIndexAfterRemove = (favorites.length-2 >= selectedIndex);
                if(!stillHasSelectedIndexAfterRemove) {
                    setSelectedIndex(0);
                }
            }
            // 如果是最后一个收藏, 切换为全部
            if (favorites.length === 1) {
                toggleOnlyFavorite()
            }
        }

        toggleFavorite(title);
    };

    const favoritesIsEmpty = favorites.length === 0;

    const hideTable = () => {
        // toggleTable();
    };

    return <>
        {showTable &&
        <div onMouseLeave={hideTable}>
            <Table numRows={poetryItems.length} defaultRowHeight={35} defaultColumnWidth={400}
                   selectionModes={SelectionModes.ROWS_AND_CELLS}
                   enableRowHeader={false}>
                <Column nameRenderer={() => <ColumnHeader {...{onlyFavorite, toggleOnlyFavorite, favoritesIsEmpty}}/>}
                        cellRenderer={cellRenderer(favorites, poetryItems, onTitleClick, onStarClick)}/>
            </Table>
        </div>}
    </>
}
